<template>
  <q-dialog v-model="inDisplay">
    <q-card style="width: 75%; min-width: 300px">
      <q-card-section>
        <div class="row items-center">
          <div class="text-h6">添加角色</div>
          <q-space/>
          <q-btn flat round icon="clear" v-close-popup/>
        </div>
      </q-card-section>
      <q-card-section>
        <character-list v-model="list"
                        @click="onAddCharacterEvent"/>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script>
import CharacterList from "components/CharacterList";
export default {
  name: 'AddCharacter',
  components: {CharacterList},
  data: () => {
    return {
      inDisplay: false
    };
  },
  props: {
    display: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array
    }
  },
  model: {
    prop: 'display',
    event: 'doChangeDisplay'
  },
  watch: {
    display (v) {
      this.inDisplay = v;
    },
    inDisplay (v) {
      this.$emit('doChangeDisplay', v);
    }
  },
  methods: {
    onAddCharacterEvent(id) {
      this.$emit('click', id);
    }
  }
}
</script>
